<template>
  <div>
    <!-- 搜索条件卡片 -->
    <el-card>
      <el-form :inline="true" :model="outBound" ref="searchForm">
        <el-form-item label="出库单号">
          <el-input v-model="outBound.outboundId" placeholder="请输入出库单号" size="small" style="width: 150px"/>
        </el-form-item>

        <el-form-item label="关联订单号">
          <el-input v-model="outBound.relatedOrderId" placeholder="请输入订单号" size="small" style="width: 150px"/>
        </el-form-item>

        <el-form-item label="物流单号">
          <el-input v-model="outBound.logisticsId" placeholder="请输入物流单编号" size="small" style="width: 150px"/>
        </el-form-item>

        <el-form-item label="出库单状态">
          <el-select v-model="outBound.status" placeholder="全部" size="small" style="width: 100px">
            <el-option label="全部" :value="null"/>
            <el-option label="待分拣" value="待分拣"/>
            <el-option label="分拣中" value="分拣中"/>
            <el-option label="待出库" value="待出库"/>
            <el-option label="已出库" value="已出库"/>
          </el-select>
        </el-form-item>

        <el-form-item label="出库仓库">
          <el-select v-model="outBound.warehouse" placeholder="全部" size="small" style="width: 100px">
            <el-option label="全部" :value="null"/>
            <el-option label="北京仓" value="北京仓"/>
            <el-option label="上海仓" value="上海仓"/>
            <el-option label="郑州仓" value="郑州仓"/>
            <el-option label="武汉仓" value="武汉仓"/>
          </el-select>
        </el-form-item>

        <!-- 出库时间范围选择 -->
        <el-form-item label="出库时间">
          <el-date-picker
            style="width: 190px"
            v-model="outBound.searchOutboundTime1"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            size="small"
            placeholder="起始日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            style="width: 190px"
            v-model="outBound.searchOutboundTime2"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            size="small"
            placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>

        <!-- 操作按钮 -->
        <el-form-item>
          <el-button type="success" round size="small" @click="onSearch" icon="el-icon-search">查询</el-button>
          <el-button type="warning" round size="small" @click="resetForm('searchForm')" icon="el-icon-refresh-left">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格数据和分页栏卡片 -->
    <el-card style="height: 500px">
      <div>
        <el-button style="margin-bottom: 10px" size="mini" type="danger" @click="deleteBatch" icon="el-icon-delete">
          批量删除
        </el-button>
        <el-button style="margin-left: 20px;margin-bottom: 10px" size="mini" type="info"
                   @click="pickBatch" icon="el-icon-s-data"
        >批量拣货
        </el-button>
        <el-button style="margin-left: 20px;margin-bottom: 10px" size="mini" type="success"
                   @click="confirmBatch" icon="el-icon-check"
        >批量确认
        </el-button>
        <el-button style="margin-left: 20px;margin-bottom: 10px" size="mini" type="primary"
                   @click="addInfoDialog" icon="el-icon-plus"
        >添加数据
        </el-button>


      </div>

      <!-- 表格数据 -->
      <el-table :data="tableData" style="width: 100%" stripe border @selection-change="handleSelectionChange"
                height="360px"
      >
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column prop="outboundId" label="出库单号" width="130"/>
        <el-table-column prop="relatedOrderId" label="关联订单" width="130"/>
        <el-table-column prop="shipperName" label="货主名称" width="100"/>
        <el-table-column prop="outboundCount" label="出库数" width="70"/>
        <el-table-column prop="remaining" label="已分拣数" width="80"/>
        <el-table-column prop="warehouse" label="出库仓库" width="90"/>
        <el-table-column prop="outboundType" label="出库类型" width="90"/>
        <el-table-column prop="status" label="状态" width="80">
          <template slot-scope="{row}">
            <el-tag :type="statusTagType(row.status)">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160"/>
        <el-table-column prop="outboundTime" label="出库时间" width="160"/>
        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="{row}">
            <el-button type="text" @click="handleView(row)">查看</el-button>
            <el-button type="text" @click="handleDelete(row)">删除</el-button>
            <el-button
              v-if="['待分拣'].includes(row.status)"
              type="text"
              @click="handlePick(row)"
            >拣货
            </el-button>
            <el-button
              v-if="['待出库'].includes(row.status)"
              type="text"
              @click="handleConfirm(row)"
            >确认
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页栏 -->
      <div style="display: flex; align-items: center; margin-top: 22px; margin-left: 100px;">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="outBound.pageNum"
          :page-sizes="[5,10,15,20,total]"
          :page-size="outBound.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-button type="primary" size="small" @click="findAll">跳转</el-button>
      </div>

    </el-card>

    <!--订单详情弹窗-->
    <el-dialog
      title="订单详情"
      :visible.sync="detailDialogVisible"
      width="1200px"
      @closed="resetDialogForm"
      class="detail-dialog"
    >
      <el-card shadow="never">
        <el-row :gutter="20">
          <!-- 左半部分信息 -->
          <el-col :span="12">
            <div class="detail-item">
              <span class="item-label">出库单号：</span>
              <span class="item-value">{{ dialogForm.outboundId }}</span>
            </div>
            <div class="detail-item">
              <span class="item-label">关联订单号：</span>
              <span class="item-value">{{ dialogForm.relatedOrderId }}</span>
            </div>
            <div class="detail-item">
              <span class="item-label">货主名称：</span>
              <span class="item-value">{{ dialogForm.shipperName }}</span>
            </div>
            <div class="detail-item">
              <span class="item-label">出库仓库：</span>
              <span class="item-value">{{ dialogForm.warehouse }}</span>
            </div>
          </el-col>

          <!-- 右半部分信息 -->
          <el-col :span="12">
            <div class="detail-item">
              <span class="item-label">出库类型：</span>
              <span class="item-value">{{ dialogForm.outboundType }}</span>
            </div>
            <div class="detail-item">
              <span class="item-label">当前状态：</span>
              <el-tag :type="statusTagType(dialogForm.status)" size="medium">
                {{ dialogForm.status }}
              </el-tag>
            </div>
            <div class="detail-item">
              <span class="item-label">创建时间：</span>
              <span class="item-value">{{ dialogForm.createTime }}</span>
            </div>
            <div class="detail-item">
              <span class="item-label">出库时间：</span>
              <span class="item-value">{{ dialogForm.outboundTime }}</span>
            </div>
          </el-col>
        </el-row>

        <!-- 物流信息 -->
        <el-row :gutter="20" style="margin-top:15px">
          <el-col :span="12">
            <div class="detail-item">
              <span class="item-label">物流公司：</span>
              <span class="item-value">{{ dialogForm.logisticsCompany || '暂无' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="item-label">物流单号：</span>
              <span class="item-value">{{ dialogForm.logisticsId || '暂无' }}</span>
            </div>
          </el-col>
        </el-row>

        <!-- 备注信息 -->
        <div class="detail-item" style="margin-top:15px">
          <span class="item-label">备　　注：</span>
          <span class="item-value" style="color:#666">{{ dialogForm.remark || '无备注信息' }}</span>
        </div>
      </el-card>

      <!-- 商品表格 -->
      <div style="margin-top:20px">
        <div style="color:#409EFF;font-weight:500;margin-bottom:10px">商品清单</div>
        <el-table
          :data="dialogForm.goodsList"
          border
          style="width:100%"
          header-row-class-name="table-header"
        >
          <el-table-column prop="productId" label="商品ID" width="100" align="center"/>
          <el-table-column prop="barCode" label="条形码" width="150" align="center"/>
          <el-table-column prop="productName" label="商品名称" width="150" align="center" show-overflow-tooltip/>
          <el-table-column label="商品图片" width="120" align="center">
            <template slot-scope="{row}">
              <el-image
                :src="row.imageUrl"
                style="width:60px;height:60px"
                fit="contain"
                :preview-src-list="[row.imageUrl]"
              >
                <div slot="error" class="image-error">
                  <i class="el-icon-picture-outline" style="font-size:20px;color:#909399"></i>
                </div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="size" label="尺码" width="90" align="center"/>
          <el-table-column prop="remaining" label="库存数" width="90" align="center"/>
          <el-table-column prop="outboundCount" label="出库数" width="90" align="center"/>
          <el-table-column prop="outboundTime" label="出库时间" width="160" align="center"/>
          <el-table-column prop="outboundOperator" label="操作人" width="100" align="center"/>
        </el-table>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false" size="small">关 闭</el-button>
        <el-button type="primary" @click="detailDialogUpdate" size="small">修 改</el-button>
      </div>
    </el-dialog>

    <!-- 新增出库单弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      width="1200px"
      class="optimized-dialog"
    >
      <el-form
        ref="addForm"
        :model="dialogForm"
        :rules="rules"
        label-width="120px"
        label-position="right"
        class="compact-form"
      >
        <!-- 核心信息区块 -->
        <el-card shadow="never" class="section-card">
          <div class="section-header">
            <span class="section-title">核心信息</span>
          </div>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="出库单号" prop="outboundId">
                <el-input
                  v-model="dialogForm.outboundId"
                  disabled
                  placeholder="系统自动生成"
                  class="input-300"
                />
              </el-form-item>
              <el-form-item label="关联订单号" prop="relatedOrderId">
                <el-input
                  v-model="dialogForm.relatedOrderId"
                  placeholder="输入关联订单号"
                  class="input-300"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="showOrderSelector"
                    class="search-btn"
                  />
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="货主名称" prop="shipperName">
                <el-input
                  v-model="dialogForm.shipperName"
                  placeholder="请输入货主名称"
                  class="input-300"
                />
              </el-form-item>
              <el-form-item label="出库仓库" prop="warehouse">
                <el-select
                  v-model="dialogForm.warehouse"
                  placeholder="请选择"
                  class="input-300"
                >
                  <el-option label="未选择" :value="null"/>
                  <el-option label="北京仓" value="北京仓"/>
                  <el-option label="上海仓" value="上海仓"/>
                  <el-option label="郑州仓" value="郑州仓"/>
                  <el-option label="武汉仓" value="武汉仓"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="出库类型" prop="outboundType">
            <el-radio-group
              v-model="dialogForm.outboundType"
              class="radio-group"
            >
              <el-radio label="订单出库" border size="small"/>
              <el-radio label="瑕疵出库" border size="small"/>
            </el-radio-group>
          </el-form-item>
        </el-card>

        <!-- 物流信息区块 -->
        <el-card shadow="never" class="section-card">
          <div class="section-header">
            <span class="section-title">物流信息</span>
          </div>

          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="物流公司" prop="logisticsCompany">
                <el-select
                  v-model="dialogForm.logisticsCompany"
                  class="input-300"
                >
                  <el-option label="未选择" :value="null"/>
                  <el-option label="顺丰" value="顺丰"/>
                  <el-option label="邮政" value="邮政"/>
                  <el-option label="京东" value="京东"/>
                  <el-option label="圆通" value="圆通"/>
                  <el-option label="韵达" value="韵达"/>
                  <el-option label="申通" value="申通"/>
                  <el-option label="极兔" value="极兔"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="物流单号" prop="logisticsId">
                <el-input
                  v-model="dialogForm.logisticsId"
                  placeholder="请输入物流单号"
                  class="input-500"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 商品信息区块 -->
        <el-card shadow="never" class="section-card">
          <div class="section-header">
            <div class="flex-between">
              <span class="section-title">出库商品信息</span>
              <div>
                <el-button
                  type="primary"
                  size="small"
                  @click="goodsDialogVisible = true"
                  icon="el-icon-plus"
                >
                  添加商品
                </el-button>
              </div>
            </div>
          </div>

          <el-table
            :data="dialogForm.goodsList"
            border
            stripe
            class="goods-table"
            header-row-class-name="table-header"
          >
            <el-table-column prop="productId" label="商品ID" width="100" align="center"/>
            <el-table-column prop="barCode" label="条形码" width="150" align="center"/>
            <el-table-column prop="productName" label="商品名称" width="150" show-overflow-tooltip align="center"/>
            <el-table-column label="商品图片" width="125" align="center">
              <template slot-scope="{row}">
                <el-image
                  :src="row.imageUrl"
                  style="width:60px;height:60px"
                  fit="contain"
                >
                  <div slot="error" class="image-error">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="size" label="尺码" width="90" align="center"/>
            <el-table-column prop="remaining" label="库存数" width="90" align="center"/>
            <el-table-column prop="outboundCount" label="出库数" width="90" align="center"/>
            <el-table-column prop="outboundTime" label="出库时间" width="160" align="center"/>
            <el-table-column prop="outboundOperator" label="操作人" width="90" align="center"/>
            <el-table-column label="操作" width="90" fixed="right" align="center">
              <template slot-scope="{ $index }">
                <el-button
                  type="text"
                  @click="removeGoods($index)"
                  style="color:#F56C6C"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>

        <!-- 备注信息 -->
        <el-card shadow="never" class="section-card remark-card">
          <div class="section-header">
            <span class="section-title">附加信息</span>
          </div>
          <el-form-item label="出库备注" prop="remark">
            <el-input
              v-model="dialogForm.remark"
              type="textarea"
              :rows="3"
              placeholder="请输入备注信息"
              resize="none"
            />
          </el-form-item>
        </el-card>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submitForm" size="small">提 交</el-button>
      </div>
    </el-dialog>


    <!-- 在新增出库单弹窗下方添加商品表单弹窗 -->
    <el-dialog
      title="添加出库商品"
      :visible.sync="goodsDialogVisible"
      width="800px"
      @closed="resetGoodsForm"
    >
      <el-form
        ref="goodsForm"
        :model="goodsForm"
        :rules="goodsRules"
        label-width="120px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商品ID：" prop="productId">
              <el-input v-model="goodsForm.productId" placeholder="请输入商品ID"/>
            </el-form-item>
            <el-form-item label="条形码：" prop="barCode">
              <el-input v-model="goodsForm.barCode" placeholder="请输入商品条形码"/>
            </el-form-item>
            <el-form-item label="商品名称：" prop="productName">
              <el-input v-model="goodsForm.productName" placeholder="请输入商品名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品尺码：" prop="size">
              <el-input v-model="goodsForm.size" placeholder="请输入商品尺码"/>
            </el-form-item>
            <el-form-item label="剩余库存：" prop="remaining">
              <el-input-number
                v-model="goodsForm.remaining"
                :min="0"
                controls-position="right"
              />
            </el-form-item>
            <el-form-item label="出库数量：" prop="outboundCount">
              <el-input-number
                v-model="goodsForm.outboundCount"
                :min="1"
                :max="goodsForm.remaining"
                controls-position="right"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="商品图片地址：" prop="imageUrl">
          <el-input
            v-model="goodsForm.imageUrl"
            placeholder="请输入图片URL地址"
            type="textarea"
            :rows="2"
          />
        </el-form-item>

        <el-form-item label="出库时间：" prop="outboundTime">
          <el-date-picker
            v-model="goodsForm.outboundTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择出库时间"
          />
        </el-form-item>

        <el-form-item label="操作人：" prop="outboundOperator">
          <el-input
            v-model="goodsForm.outboundOperator"
            placeholder="请输入操作人姓名"
          />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="goodsDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addGoods">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 搜索关联订单弹窗 -->
    <el-dialog
      title="关联订单详情"
      :visible.sync="orderDialogVisible"
      width="800px"
    >
      <div class="order-detail-container">
        <!-- 基本信息区块 -->
        <el-card shadow="never" class="detail-section">
          <div slot="header" class="clearfix">
            <span class="section-title">基本信息</span>
          </div>

          <el-form label-width="100px" class="compact-form">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="出库单号：" class="form-item-bold">
                  {{ relatedOrderFormData.outboundId }}
                </el-form-item>
                <el-form-item label="关联订单号：">
                  {{ relatedOrderFormData.relatedOrderId }}
                </el-form-item>
                <el-form-item label="出库仓库：">
                  {{ relatedOrderFormData.warehouse }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="货主名称：">
                  {{ relatedOrderFormData.shipperName }}
                </el-form-item>
                <el-form-item label="出库类型：">
                  {{ relatedOrderFormData.outboundType }}
                </el-form-item>
                <el-form-item label="当前状态：">
                  <el-tag :type="statusTagType(relatedOrderFormData.status)">
                    {{ relatedOrderFormData.status }}
                  </el-tag>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="创建时间：">
                  {{ relatedOrderFormData.createTime }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="出库时间：">
                  {{ relatedOrderFormData.outboundTime }}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <!-- 备注信息区块 -->
        <el-card shadow="never" class="remark-section">
          <div slot="header" class="clearfix">
            <span class="section-title">出库备注</span>
          </div>
          <div class="remark-content">
            {{ relatedOrderFormData.remark || '暂无备注信息' }}
          </div>
        </el-card>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="orderDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>


  </div>
</template>


<script>
import {
  deleteBatch,
  deleteOne,
  findAll,
  confirm,
  pick,
  pickBatch,
  confirmBatch,
  saveDialogForm,
  searchRelateData,
  detail
} from '@/api/Outbound.js'

export default {
  name: 'platformOrderOutbound',
  data() {
    return {
      outBound: {
        outboundId: null,
        relatedOrderId: null,
        status: null,
        warehouse: null,
        logisticsId: null,
        searchOutboundTime1: null,//搜索条件出库时间---开始时间
        searchOutboundTime2: null,//搜索条件出库时间---结束时间
        pageSize: 5, //分页信息
        pageNum: 1,  //分页信息
        selectedIds: []//多选---选择的行的id数组
      },//用于传递给后端传参
      total: 0,//分页---总条数
      tableData: [],//表格数据
      relatedOrderFormData: [],//表单数据
      multipleSelection: [],//多选---选择的行的id数组

      title: '',//弹窗标题
      dialogFormVisible: false,//新增弹窗
      orderDialogVisible: false, //关联订单弹窗
      goodsDialogVisible: false,//商品表单弹窗
      detailDialogVisible: false,//详情弹窗

      rules: {
        relatedOrderId: [
          { required: true, message: '关联订单号不能为空', trigger: 'blur' }
        ],
        shipperName: [
          { required: true, message: '货主名称不能为空', trigger: 'blur' }
        ],
        warehouse: [
          { required: true, message: '请选择出库仓库', trigger: 'change' }
        ],
        outboundType: [
          { required: true, message: '请选择出库类型', trigger: 'change' }
        ],
        logisticsId: [
          { pattern: /^[A-Za-z0-9]{8,20}$/, message: '物流单号格式错误', trigger: 'blur' }
        ]
      },//表单验证规则
      goodsRules: {
        productId: [
          { required: true, message: '商品ID不能为空', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9]{6,20}$/, message: 'ID格式不正确' }
        ],
        barCode: [
          { required: true, message: '条形码不能为空', trigger: 'blur' },
          { pattern: /^[0-9]{13}$/, message: '条形码必须为13位数字' }
        ],
        productName: [
          { required: true, message: '商品名称不能为空', trigger: 'blur' }
        ],
        size: [
          { required: true, message: '商品尺码不能为空', trigger: 'change' }
        ],
        remaining: [
          { required: true, message: '请输入库存数量', trigger: 'blur' },
          { type: 'number', min: 0, message: '库存不能为负数' }
        ],
        outboundCount: [
          { required: true, message: '请输入出库数量', trigger: 'blur' },
          { type: 'number', min: 1, message: '出库数至少1件' }
        ],
        outboundTime: [
          { required: true, message: '请选择出库时间', trigger: 'change' }
        ],
        outboundOperator: [
          { required: true, message: '请输入操作人', trigger: 'blur' },
          { pattern: /^[\u4e00-\u9fa5]{2,5}$/, message: '请输入2-5位中文姓名' }
        ]
      },//商品表单验证规则

      goodsForm: {
        productId: '',
        barCode: '',
        productName: '',
        imageUrl: '',
        size: '',
        remaining: 0,
        outboundCount: 1,
        outboundTime: '',
        outboundOperator: ''
      },//商品表单数据
      dialogForm: {
        functionSelect: 'insert',//insert新增，update更新
        outboundId: null,
        relatedOrderId: null,
        shipperName: null,
        warehouse: null,
        outboundType: null,
        remark: null,
        logisticsCompany: null,
        logisticsId: null,
        goodsList: [] // 商品列表
      }//新增弹窗表单数据,用于传递给后端保存
    }
  },
  methods: {
    findAll() {
      findAll(this.outBound).then(ret => {
        this.tableData = ret.data.list
        this.total = ret.data.total
      })
    },//分页查询全部数据
    onSearch() {
      this.outBound.pageNum = 1
      this.findAll()
    },//搜索按钮调用
    statusTagType(status) {
      const types = {
        '待分拣': 'warning',
        '已分拣': 'info',
        '待出库': 'primary',
        '已出库': 'success'
      }
      return types[status] || 'info'
    },// 状态标签类型
    resetForm(formName) {
      this.$refs[formName].resetFields()//抄的官方文档的写法，通过ref获取表单实例，调用resetFields方法重置表单
      this.outBound.outboundId = null
      this.outBound.relatedOrderId = null
      this.outBound.warehouse = null
      this.outBound.status = null
      this.outBound.searchOutboundTime1 = null
      this.outBound.searchOutboundTime2 = null
      this.outBound.logisticsId = null
      this.findAll()
    },//重置搜索条件按钮调用
    handleSizeChange(val) {
      this.outBound.pageSize = val
      this.findAll()//每当分页大小变化时，重新查询
    },//分页大小变化
    handleCurrentChange(val) {
      this.outBound.pageNum = val
      this.findAll()//每当分页页码变化时，重新查询
    },//分页页码变化

    handleSelectionChange(val) {
      this.multipleSelection = val.map(outBound => outBound.outboundId)
    },//多选处理---用于批量删除操作
    handleDelete(row) {
      //弹出确认框
      this.$confirm('确认删除该订单吗？', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消删除',
        type: 'warning'
      }).then(() => {
        //调用后端删除接口
        this.outBound.outboundId = row.outboundId
        deleteOne(this.outBound).then(ret => {
          this.$message.success('删除成功')
          this.outBound.pageNum = 1
          this.outBound.outboundId = null
          this.findAll()
        })
      }).catch(() => {
      })
    },//单个删除
    deleteBatch() {
      //弹出确认框
      this.$confirm('确认删除这些订单吗？', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消删除',
        type: 'warning'
      }).then(() => {
        //调用后端删除接口
        //注意：后端接口需要接收一个ids参数，值为选择的行的id数组，用逗号分隔
        this.outBound.selectedIds = this.multipleSelection.join(',')
        deleteBatch(this.outBound).then(ret => {
          this.$message.success('删除成功')
          this.outBound.pageNum = 1
          this.findAll()
        })
      }).catch(() => {
      })
    },//多选删除---批量删除按钮调用
    handlePick(row) {
      this.outBound.outboundId = row.outboundId
      pick(this.outBound).then(ret => {
        this.$message.success('拣货中')
        this.outBound.pageNum = 1
        this.resetForm('searchForm')
      })
    },// 拣货按钮
    pickBatch() {
      this.$confirm('确认批量拣货吗？', '提示', {
        confirmButtonText: '确定拣货',
        cancelButtonText: '取消拣货',
        type: 'warning'
      }).then(() => {
        // 调用后端拣货接口
        this.outBound.selectedIds = this.multipleSelection.join(',')
        pickBatch(this.outBound).then(ret => {
          this.$message.success('拣货中')
          this.outBound.pageNum = 1
          this.resetForm('searchForm')
        })
      }).catch(() => {
      })
    },// 批量拣货按钮
    handleConfirm(row) {
      this.outBound.outboundId = row.outboundId
      confirm(this.outBound).then(ret => {
        this.$message.success('已出库')
        this.outBound.pageNum = 1
        this.resetForm('searchForm')
      })
    },// 确认按钮
    confirmBatch() {
      this.$confirm('确认批量出库吗？', '提示', {
        confirmButtonText: '确定出库',
        cancelButtonText: '取消出库',
        type: 'warning'
      }).then(() => {
        // 调用后端出库接口
        this.outBound.selectedIds = this.multipleSelection.join(',')
        confirmBatch(this.outBound).then(ret => {
          this.$message.success('已出库')
          this.outBound.pageNum = 1
          this.resetForm('searchForm')
        })
      }).catch(() => {
      })
    },// 批量确认按钮

    generateTimestampId() {
      const prefix = 'OB'
      const datePart = new Date().toISOString().slice(0, 10).replace(/-/g, '')
      const randomPart = Math.floor(Math.random() * 1000).toString().padStart(3, '0')
      return `${prefix}${datePart}${randomPart}`
    },// 生成出库单号,用时间戳和随机数拼接,例如OB20210817123456789
    showOrderSelector() {
      this.outBound.OutboundId = this.dialogForm.relatedOrderId
      searchRelateData(this.outBound).then(ret => {
        //当查询到关联订单信息时则显示对话框，否则不显示信息，并提示用户
        if (ret.data.length > 0) {
          // 取第一条数据填充表单
          this.relatedOrderFormData = { ...ret.data[0] }
          console.log(this.relatedOrderFormData)
          this.orderDialogVisible = true
        } else {
          this.$message.warning('未查询到相关订单信息')
        }
      })
    },// 显示关联订单弹窗
    resetGoodsForm() {
      this.$refs.goodsForm.resetFields()
      this.goodsForm = {
        productId: '',
        barCode: '',
        productName: '',
        imageUrl: '',
        size: '',
        remaining: 0,
        outboundCount: 1,
        outboundTime: '',
        outboundOperator: ''
      }
    },// 重置商品表单
    addGoods() {
      this.$refs.goodsForm.validate(valid => {
        if (valid) {
          this.dialogForm.goodsList.push({
            ...this.goodsForm,
            remaining: Number(this.goodsForm.remaining),
            outboundCount: Number(this.goodsForm.outboundCount)
          })
          this.goodsDialogVisible = false
          this.$message.success('商品添加成功')
        }
      })
    }, // 添加商品到列表
    removeGoods(index) {
      this.dialogForm.goodsList.splice(index, 1)
    }, // 移除商品
    submitForm() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (this.dialogForm.goodsList.length === 0) {
            this.$message.warning('请至少添加一件商品')
            return
          }
          // 调用提交接口
          console.log(this.dialogForm)
          saveDialogForm(this.dialogForm).then(() => {
            this.$message.success('新增成功')
            this.dialogFormVisible = false
            this.resetForm('addForm')
            this.outBound.pageNum = 1
            this.findAll()

            if(this.dialogForm.functionSelect === 'update') {
              detail(this.dialogForm.outboundId).then(ret => {
                this.detailDialogVisible = false
                this.dialogForm = { ...ret.data }
                this.detailDialogVisible = true
              })
            }
          })
        }
      })


    },// 提交表单
    handleView(row) {
      detail(row.outboundId).then(ret => {
        this.dialogForm = { ...ret.data }
        this.detailDialogVisible = true
      })
    },// 详情按钮
    resetDialogForm() {
      this.dialogForm = {
        outboundId: this.generateTimestampId(),// 出库单号,自动生成
        relatedOrderId: '',
        shipperName: '',
        warehouse: null,
        outboundType: '订单出库',
        remark: '',
        logisticsCompany: null,
        logisticsId: '',
        goodsList: []
      }
    },// 重置详情弹窗
    addInfoDialog() {
      this.resetDialogForm()
      this.title = '新增出库单'
      this.dialogForm.functionSelect = 'insert'
      this.dialogFormVisible = true
    },// 新增按钮
    detailDialogUpdate() {
      this.title = '更新出库单'
      this.dialogForm.functionSelect = 'update'
      this.dialogFormVisible = true
    },// 更新按钮
  },

  created() {
    this.findAll()
  }//钩子函数---在组件创建完成后，立即查询一次数据
}
</script>
<style scoped>
.order-detail-container {
  padding: 0 20px;
}

.detail-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}

.compact-form {
  margin: -10px;
}

.compact-form ::v-deep .el-form-item {
  margin-bottom: 12px;
  padding: 4px 0;
}

.compact-form ::v-deep .el-form-item__label {
  color: #606266;
  font-weight: normal;
}

.form-item-bold ::v-deep .el-form-item__content {
  font-weight: 500;
  color: #303133;
}

.remark-section {
  background: #f8f9fa;
}

.remark-content {
  padding: 12px;
  line-height: 1.6;
  color: #606266;
  min-height: 60px;
}

.dialog-footer {
  padding: 20px 0 0;
  text-align: center;
}

.optimized-dialog {
  padding: 0 20px;
}

.section-card {
  margin-bottom: 20px;
  border: 1px solid #EBEEF5;
}

.section-header {
  padding: 12px 0;
  border-bottom: 1px solid #EBEEF5;
  margin-bottom: 15px;
}

.section-title {
  font-size: 15px;
  color: #303133;
  font-weight: 600;
  padding-left: 8px;
  border-left: 3px solid #409EFF;
}

.compact-form ::v-deep .el-form-item {
  margin-bottom: 18px;
}

.input-300 {
  width: 300px;
}

.input-500 {
  width: 500px;
}

.radio-group ::v-deep .el-radio {
  margin-right: 20px;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.goods-table {
  margin-top: 10px;
}

.table-header th {
  background-color: #f8f9fa !important;
  color: #606266;
}

.image-error {
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.remark-card ::v-deep .el-form-item__label {
  padding-right: 20px;
}

.dialog-footer {
  padding: 20px 0 10px;
  text-align: center;
}


/* 详情弹窗样式 */
.detail-dialog .el-dialog__body {
  padding: 20px 25px;
}

.detail-item {
  margin: 12px 0;
  font-size: 14px;
}

.item-label {
  display: inline-block;
  width: 90px;
  color: #909399;
  text-align: right;
  margin-right: 10px;
}

.item-value {
  color: #303133;
  font-weight: 400;
}

.table-header th {
  background-color: #f8f9fa !important;
  color: #606266;
  font-weight: 500;
}

.image-error {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
}

.dialog-footer {
  padding-top: 15px;
  text-align: right;
}

</style>
